import Vue from 'vue'
//引入一个一个的组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//第一步：引入并安装VueRouter这个插件
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//将VueRouter原型上的push和replace保存一份
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace

//修改VueRouter原型上的push，用于解决重复跳转报错
VueRouter.prototype.push = function(location,onSuccess,onFail){
	if(onSuccess !== undefined && onFail !== undefined){
		return originalPush.call(this,location,onSuccess,onFail)
	}else{
		return originalPush.call(this,location).catch(()=>{})
	}
}
//修改VueRouter原型上的replace，用于解决重复跳转报错
VueRouter.prototype.replace = function(location,onSuccess,onFail){
	if(onSuccess !== undefined && onFail !== undefined){
		return originalReplace.call(this,location,onSuccess,onFail)
	}else{
		return originalReplace.call(this,location).catch(()=>{})
	}
}

//第二步：创建一个router(路由器)并管理了一组组的路由规则
const router = new VueRouter({
	mode:'history',
	//routes用于配置一组一组的路由规则
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About
		},
		{
			name:'zhuye',
			path:'/home',
			component:Home,
			children:[
				{
					name:'xinwen',
					path:'news',
					component:News
				},
				{
					name:'xiaoxi',
					path:'message',
					component:Message,
					children:[
						{
							name:'xiangqing',
							path:'detail',

							//第一种写法，作用：将路由收到的params参数以props的形式传给路由组件。
							// props:true,

							//第二种写法，作用：将该对象中所有的key-value以props的形式传给路由组件。
							// props:{a:1,b:2}
							
							//第三种写法，作用：将返回对象中的key-value以props的形式传给路由组件
							/* 
									1.一旦匹配上该规则，props函数就调用
									2.收到的参数就是$route
									3.要写一个对象作为返回值，将该对象中所有的key-value以props的形式传给路由组件。
							*/
							props: route => ({...route.query,school:'尚硅谷'}),
							component:Detail,
						}
					]
				}
			]
		},
		{
			path:'/',
			redirect:'/about'
		}
	]
})
//暴露路由器
export default router